<template>
  <div id="OrdersList">
    <h1 class="title">查看所有订单信息</h1>

    <el-dialog title="查看详情" :visible.sync="dialogFormVisible">
      <el-table stripe :data="insuresorders" border style="width: 100%">
        <el-table-column fixed prop="_id" label="订单编号"> </el-table-column>
        <el-table-column prop="orderTIme" label="订单时间"> </el-table-column>
        <el-table-column prop="province" label="订单名称">
          <template slot-scope="scope">
            <label>{{
              scope.row.insuresID != null ? scope.row.insuresID.name : "暂无"
            }}</label>
          </template>
        </el-table-column>
        <el-table-column prop="province" label="保险类型">
          <template slot-scope="scope">
            <label>{{
              scope.row.insuresID != null ? scope.row.insuresID.policy.join('') : "暂无"
            }}</label>
          </template>
        </el-table-column>
        <el-table-column prop="province" label="保险对象">
          <template slot-scope="scope">
            <label>{{
              scope.row.insuresID != null
                ? scope.row.insuresID.suitableFor
                : "暂无"
            }}</label>
          </template>
        </el-table-column>
        <el-table-column label="付款方式">
          <template slot-scope="scope">
            <label>{{
              scope.row.insuresID != null ? scope.row.insuresID.payType : "暂无"
            }}</label>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <template>
      <el-table stripe :data="insuresorders" border style="width: 100%">
        <el-table-column fixed prop="_id" label="订单编号"> </el-table-column>
        <el-table-column prop="orderTime" label="订单时间"> </el-table-column>
        <el-table-column prop="province" label="订单名称">
          <template slot-scope="scope">
            <label>{{
              scope.row.insuresID != null ? scope.row.insuresID.name : "暂无"
            }}</label>
          </template>
        </el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <label>{{ ordersState(scope.row.orderState) }}</label>
          </template>
        </el-table-column>
        <el-table-column label="付款方式">
          <template slot-scope="scope">
            <label>{{
              scope.row.insuresID != null ? scope.row.insuresID.payType : "暂无"
            }}</label>
          </template>
        </el-table-column>
        <el-table-column label="退保申请">
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-if="scope.row.isWarranty == 0"
              @click="cancellation(scope.row._id)"
              >退保申请</el-button
            >
            <el-button v-else-if="scope.row.isWarranty == 1" size="mini"
              >退保申请中...</el-button
            >
            <el-button v-else-if="scope.row.isWarranty == 2" size="mini"
              >退保成功</el-button
            >
            <el-button v-else size="mini">退保失败</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="$router.push('/System/ModifyInsures/' + scope.row._id)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="delOrders(scope.row._id)"
              >删除</el-button
            >
            <el-button type="text" @click="clickDetails(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.currentPage + 1"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
  "insuresorders"
);
export default {
  created() {
    const isAdmins = JSON.parse(localStorage.getItem("loginUser"));
    this.getMyOrders(isAdmins._id);
  },
  computed: {
    ...mapState(["insuresorders", "pageData"]),
  },
  methods: {
    ...mapActions(["getMyOrders", "delOrder", "cancelOrder", "isAdm"]),
    ...mapMutations(["changeCurrentPage", "changePageSize"]),
    ordersState(data) {
      switch (data) {
        case 1:
          return "待支付";
          break;
        case 2:
          return "已支付";
          break;
        case 3:
          return "已取消";
          break;
      }
    },
    delOrders(_id) {
      const isAdmins = JSON.parse(localStorage.getItem("loginUser"));
      this.delOrder(_id);
      this.getMyOrders(isAdmins._id);
    },
    cancellation(_id) {
      const isAdmins = JSON.parse(localStorage.getItem("loginUser"));
      this.cancelOrder(_id);
      this.getMyOrders(isAdmins._id);
    },

    clickDetails(row) {
      this.details = [row];
      this.dialogFormVisible = true;
    },

    //每页数据条数
    handleSizeChange(val) {
      this.changePageSize(val);
      const isAdmins = JSON.parse(localStorage.getItem("loginUser"));
      this.getMyOrders(isAdmins._id);
    },

    //翻页
    handleCurrentChange(val) {
      this.changeCurrentPage(val - 1);
      const isAdmins = JSON.parse(localStorage.getItem("loginUser"));
      this.getMyOrders(isAdmins._id);
    },
  },

  data() {
    return {
      dialogFormVisible: false,
    };
  },
};
</script>

<style lang="scss" scoped>
#OrdersList {
  .title {
    font-size: 18px;
    font-weight: lighter;
    margin: 10px 0;
  }
  .block {
    margin: 10px 0;
  }
}
</style>